<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-03-22 11:37:08
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-03-23 18:25:52
-->
<template>
    <div class="Main">
        <div class="MainTitle flex align-center justify-between">
            订单详情
            <el-button size="medium" type="primary" @click="DetailBack">
                返回
            </el-button>
        </div>
        <div class="MianContent" v-if="isHide">
            <div class="MainTopAction">
                <div class="mx-200 mb-20" style="flex: 1;" v-if="info != ''">
                    <a-steps :current="status" labelPlacement="vertical">
                        <a-step title="待接单" :description="info.create_time" />
                        <a-step title="待处理" :description="info.handle_time" />
                        <a-step title="买家付款" :description="info.pay_time" />
                        <a-step title="施工中" :description="info.build_start_time" />
                        <a-step title="已完成" :description="info.complete_time" />
                    </a-steps>
                </div>
            </div>
            <div v-if="info.status" class="flex py-50 mb-20 align-center justify-center" style="background: #f9f7f5;">
                <div class="flex align-center">
                    <Icon type="clock-circle" style="font-size: 50px;color: #DDA955;" />
                    <div class="ml-10">
                        <div style="color: #000;font-size: 18px;">订单状态：{{info.status=='0'?'已取消':info.status=='1'?'待接单':info.status=='2'?'待处理':info.status=='3'?'待支付':info.status=='4'?'待施工':info.status=='5'?'已完成':'已关闭'}}</div>
                        <!-- 订单状态(0已取消,1待接单,2待处理,3待付定金,4待设计,5已完成,6已关闭) -->

                        <div v-if="info.status=='3'">买家已付款 请设计尽快设计</div>
                    </div>
                </div>
            </div>
            <div class="mb-20" style="color: #000;font-size: 20px;">详细信息</div>
            <div class="mb-20" style="width: 600px;background: #fff;">
                <div class="flex align-center justify-between mb-10">
                    <div>
                        <span style="color: #999999;">订单编号：</span>
                        <span>{{info.order_no}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">下单时间：</span>
                        <span>{{info.create_time}}</span>
                    </div>
                </div>
                <div class="flex align-center justify-between mb-10">
                    <div>
                        <span style="color: #999999;">客户姓名：</span>
                        <span>{{info.realname}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">手机号码：</span>
                        <span>{{info.phone}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">面积户型：</span>
                        <span>{{info.house_area}} m² </span>
                        <span class="ml-10">{{info.house_type}}</span>
                    </div>
                </div>
                <div class="mb-10 flex align-center justify-between">
                    <div class="flex align-center" style="flex: 1;">
                        <span style="color: #999999;">收货信息：</span>
                        <span style="flex: 1;">{{info.province}} {{info.city}} {{info.area}} {{info.address}} {{info.name}} {{info.mobile}}</span>
                    </div>
                    <!-- <span style="color: #DDA955;cursor: pointer;">复制</span> -->
                </div>
                <div class="flex align-center justify-between mb-10">
                    <div>
                        <span style="color: #999999;">设计时间：</span>
                        <span>{{info.order_code}}</span>
                    </div>
                    <div>
                        <!-- <span style="color: #999999;">下单时间：</span>
                      <span>{{info.nickname}}</span> -->
                    </div>
                </div>
            </div>
            <div class="flex align-start mb-20">
                <span>设计诉求：</span>
                <el-input type="textarea" v-model="info.remark" placeholder="设计诉求" style="width: 600px;" :auto-size="{ minRows: 3, maxRows: 5 }" />
            </div>
            <div class="mb-20" style="color: #000;font-size: 20px;border-bottom: 1px solid #cac7c7;padding-bottom: 8px;">图纸/合同</div>
            <div class="mb-20">
                <div class="flex align-start mb-20">
                    <span class="mr-20" style="font-size: 16px;color: #333;">图纸</span>
                    <div class="flex align-center">
                        <img v-for="(item,index) in info.draw_thumb_url" :key="index" style="width: 120px;height: 120px;border-radius: 5px;overflow: hidden;margin-right: 10px;" :src="item.path">
                    </div>
                </div>
                <div class="flex align-start mb-20">
                    <span class="mr-20" style="font-size: 16px;color: #333;">合同</span>
                    <div class="flex align-center">
                        <img v-for="(item,index) in info.draw_thumb_url" :key="index" style="width: 120px;height: 120px;border-radius: 5px;overflow: hidden;margin-right: 10px;" :src="item.path">
                    </div>
                </div>
                <div class="flex align-start mb-20">
                    <span class="mr-20" style="font-size: 16px;color: #333;">选材单</span>
                    <div class="flex align-center">
                        <img v-for="(item,index) in info.material_thumb_url" :key="index" style="width: 120px;height: 120px;border-radius: 5px;overflow: hidden;margin-right: 10px;" :src="item.path">
                    </div>
                </div>
            </div>
            <div class="mb-20 flex align-center">
                <span class="mr-10" style="font-size: 16px;color: #333;">合同价格</span>
                <el-input v-model="info.contract_price" style="width: 200px;" placeholder="" />
            </div>
            <div class="mb-20 flex align-center">
                <div class="flex align-center mr-100">
                    <span class="mr-10" style="font-size: 16px;color: #333;">支付次数</span>
                    <el-input :value="info.pay_progress?info.pay_progress.length:''" style="width: 200px;" placeholder="" />
                </div>
                <div class="flex align-center">
                    <span class="mr-10" style="font-size: 16px;color: #333;">支付比例</span>
                    <el-input v-model="info.pay_rule" style="width: 200px;" placeholder="" />
                </div>
            </div>
            <div>
                <div v-for="(item,index) in info.pay_progress" :key="index" style="display: flex;align-items: center;margin-left: 24px;margin-bottom: 20px;">
                    <div style="width: 30px;height: 30px;background: #DDA955;color: #fff;overflow: hidden;display: flex;align-items: center;justify-content: center;border-radius: 50%;margin-right: 10px;">1</div>
                    <div>
                        <span>{{item.rate *100}}%</span>
                        <span style="color: #999;margin-left: 10px;">(¥{{item.amount}})</span>
                    </div>
                    <div style="color: #DDA955;margin-left: 100px;">{{item.pay_status == 0?'发起收款':item.pay_status == 1?'待付款':'已付款'}}</div>
                </div>
                <div class="flex align-center justify-between mb-20 ml-24">
                    <div class="flex align-start" style="flex: 1;">
                        <span style="color: #999999;margin-right: 10px;">备注</span>
                        <el-input type="textarea" :value="info.pay_rule_desc" style="width: 600px;" :auto-size="{ minRows: 3, maxRows: 5 }" />
                    </div>
                </div>
            </div>
            <div>
                <div class="flex flex-wrap">
                    <div @click="TabsChange(item,index)" :class="['TabsItem',current == index?'TabsIndex':'']" v-for="(item,index) in TabsList" :key="item.id">{{item.name}}</div>
                </div>
                <div v-if="current == 0">
                    <div>
                        <div class="flex align-center mb-20" v-for="(item,index) in BuildDirector" :key="index">
                            <div class="mr-10">{{index == 0?'管家':'工厂'}}</div>
                            <el-input :value="item.name" style="width: 200px;margin-right: 20px;" placeholder="" />
                            <el-input :value="item.phone" style="width: 200px;" placeholder="" />
                        </div>
                    </div>
                </div>
                <div v-if="current == 1">
                    <Table :columns="listfields" :data-source="listData" :bordered="false" size="middle" :pagination="false">
                        <div slot="status" slot-scope="row, index">
                            {{row ==0?'未完工':row ==1?'待确认': '已完工'}}
                        </div>
                    </Table>
                </div>
                <div v-if="current == 2">
                    <ul class="broadList">
                        <li class="item" v-for="(item,index) in broadListData" :key="index">
                            <div class="lef">{{item.create_time}}</div>
                            <div class="right">
                                <div class="imgBox" v-if="item.type==0">
                                    <img :src="item1.path" alt="" v-for="(item1,index1) in item.media" :key="index1">
                                </div>
                                <div class="imgBox" v-else>
                                    <video :src="item1.path" controls :poster="item1.cover" v-for="(item1,index1) in item.media" :key="index1"></video>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div v-if="current == 3">
                    <el-collapse accordion v-model="activeColl" @change="changeCollapse">
                        <el-collapse-item v-for="(item,index) in archivesList" :key="index" :name="item.id">
                            <template slot="title">
                                <h3 class="title_box">{{item.name}}</h3>
                            </template>
                            <ul class="catalogue">
                                <li class="cataItem" v-for="(item1,index1) in retaList" :key="index1">
                                    <div class="itemTit">
                                        <h4>{{item1.title}}</h4>
                                    </div>
                                    <div>{{item1.content}}</div>
                                    <div class="imgBox" v-if="item1.type==0">
                                        <template v-if="Array.isArray(item1.media)">
                                            <img :src="item2.path" alt="" v-for="(item2,index2) in item1.media" :key="index2">
                                        </template>
                                        <template v-else>
                                            <img :src="item1.media.path" alt="">
                                        </template>
                                    </div>
                                    <div class="imgBox" v-else>
                                        <template v-if="Array.isArray(item1.media)">
                                            <video :src="item2.path" alt="" controls :poster="item2.cover" v-for="(item2,index2) in item1.media" :key="index2"></video>
                                        </template>
                                        <template v-else>
                                            <video :src="item1.media.path" controls :poster="item1.media.cover"></video>
                                        </template>
                                    </div>
                                </li>
                            </ul>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import Pagination from '@/common/pagination.vue'
    import { Progress } from '@/components/superSteward/Order/Columns/Order'
    import Table from 'ant-design-vue/lib/table';
    import Icon from 'ant-design-vue/lib/icon';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'list',
        components: {
            Pagination,
            Table,
            Icon
        },
        data() {
            return {
                total: 0, //定义初始有多少条数据
                pageno: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                listfields: Progress, //表头列表
                listData: [], //表格数据
                status: '',
                info: '',
                isHide: true,
                current: 0, //tabs当前选中
                // 切换tabs选择列表
                TabsList: [{
                    id: 0,
                    name: '负责人'
                }, {
                    id: 1,
                    name: '施工进度'
                }, {
                    id: 2,
                    name: '施工播报'
                }, {
                    id: 3,
                    name: '档案留存'
                }, ],
                BuildDirector: [],
                BuildProgress: [],
                broadListData: [],
                archiveId: null, //档案目录id
                activeColl: null, //目录选择
                retaList: [], //档案留存列表
                archivesList: [],

            };
        },
        computed: {
            ...mapState({
                // listfields: state => state.Operator.fields, //获取table头
            }),
        },
        created() {},
        mounted() {
            let that = this
            let id = this.$route.query.id;
            // if (this.$route.query.back == 'OrderList') {
            that.GetOrderDetail(id)
            // } else {
            //     that.GetProductDetail(id)
            // }
        },
        methods: {
            ...mapActions({
                // GetFields: 'Operator/GetFields', //获取table头
            }),
            TabsChange(item, index) {
                let that = this
                that.pageno = 1
                that.pagesize = 10
                switch (index) {
                    case 0:
                        that.BuildDirectorMes(index)
                        break;
                    case 1:
                        that.GetBuildProgressMes(index)
                        break;
                    case 2:
                        that.GetBuildBroadcastMes(index)
                        break;
                    case 3:
                        that.GetArchiveCategoryMes(index)
                        break;
                }
                // that.current = index
            },
            // 点击了目录
            changeCollapse(e) {
                console.log(e, '目录');
                if (e) {
                    this.GetBuildArchiveMes(e)
                }
            },
            async GetBuildArchiveMes(id) {
                let that = this
                let params = {
                    category_id: id,
                    page: that.pageno,
                    pagesize: that.pagesize,
                }
                const res = await that.$http.post('/api/root/BuildArchive/index',params)
                if (res.code == '1') {
                    const data = res.data
                    this.retaList = data.list ? data.list : []
                }
            },
            async GetArchiveCategoryMes(index) {
                let that = this
                let params = {
                    order_id: that.$route.query.id,
                }
                const res = await that.$http.post('/api/root/ArchiveCategory/index',params)
                if (res.code == '1') {
                    const data = res.data
                    that.archivesList = data.list ? data.list : []
                    // that.broadListData = data.list
                    that.current = index
                }
            },
            async GetBuildBroadcastMes(index) {
                let that = this
                let params = {
                    order_id: that.$route.query.id,
                    page: that.pageno,
                    pagesize: that.pagesize,
                }
                const res = await that.$http.post('/api/root/BuildBroadcast/index',params)
                if (res.code == '1') {
                    const data = res.data
                    console.log(data);
                    if (data.list.length > 0) {
                        data.list.forEach((item, index) => {
                            item.create_time = item.create_time ? that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                        })
                    }
                    that.broadListData = data.list
                    that.current = index
                }
            },
            async GetBuildProgressMes(index) {
                let that = this
                let params = {
                    order_id: that.$route.query.id,
                    page: that.pageno,
                    pagesize: that.pagesize,
                }
                const res = await that.$http.post('/api/root/BuildProgress/index',params)
                if (res.code == '1') {
                    const data = res.data
                    if (data.list.length > 0) {
                        data.list.forEach((item, index) => {
                            item.key = item.id
                            item.complete_time = item.complete_time ? that.$moment(item.complete_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                        })
                    }
                    // console.log(data);
                    that.total = data.count
                    that.listData = data.list
                    that.current = index
                }
            },
            async BuildDirectorMes(index) {
                let that = this
                let params = {
                    order_id: that.$route.query.id,
                }
                const res = await that.$http.post('/api/root/BuildDirector/index',params)
                if (res.code == '1') {
                    // console.log(res.data);
                    that.BuildDirector = res.data.list
                    that.current = 0
                }
            },
            async GetOrderDetail(row) {
                let that = this
                let params = {
                    id: row,
                }
                const res = await that.$http.post('/api/root/StewardOrder/getBuilderTeamOrderDetail',params)
                if (res.code == '1') {
                    const data = res.data
                    data['create_time'] = data.create_time ? that.$moment(data.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['handle_time'] = data.handle_time ? that.$moment(data.handle_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['pay_time'] = data.pay_time ? that.$moment(data.pay_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['build_start_time'] = data.build_start_time ? that.$moment(data.build_start_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['complete_time'] = data.complete_time ? that.$moment(data.complete_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    that.info = data
                    that.status = data.status - 1
                    that.listData = data.product_list
                    setTimeout(() => {
                        that.isHide = true
                        that.BuildDirectorMes()
                    })
                }
            },
            DetailBack() {
                // let query = this.$route.query
                // if(query.params){
                // 	this.$router.push({
                // 	    name: query.back,
                // 		query: { choose_id: query.params.choose_id, steward_id: query.params.steward_id }
                // 	});
                // }else{
                	// this.$router.push({
                	//     name: query.back,
                	// });
                // }
                this.$router.back(1)
            },
            //分页器 
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.pageno = pageno;
                this.pagesize = pagesize;
                this.GetList(); //这个是向后台请求的数据函数
            },
            //切换每页显示多少条
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.pageno = current;
                this.pagesize = size;
                this.GetList(); //这个是向后台请求的数据函数
            },
        },
    };
</script>

<style scoped lang="less">
    .Main {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;

        .MainTitle {
            font-size: 24px;
            color: #333;
            margin: 10px 20px;
            position: relative;
        }

        .MainTitle:before {
            content: '';
            width: 40px;
            height: 12px;
            background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(221, 169, 85, 0.3) 100%);
            position: absolute;
            bottom: 2px;
            left: 0;
        }

        .MianContent {
            padding: 10px 20px 20px 20px;

            .MainTopAction {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .TabsItem {
                padding: 10px 0;
                width: 70px;
                position: relative;
                margin-right: 24px;
                text-align: center;
                cursor: pointer;
                margin-bottom: 20px;
                color: #000;
            }

            .TabsIndex {
                color: #DDA955;
            }

            .TabsIndex::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                width: 50px;
                height: 2px;
                background-color: #DDA955;
            }
        }
    }

    .broadList {
        .item {
            display: flex;
            // .left{}
            align-items: center;

            .right {
                width: 100%;
                margin-left: 20px;
                padding: 15px 0;
                border-bottom: 1px solid #ccc;

                .text {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    i {
                        margin-right: 20px;
                        cursor: pointer;
                    }
                }

                .imgBox {
                    margin-top: 15px;

                    img {
                        width: 65px;
                        height: 65px;
                        margin-right: 10px;
                    }

                    video {
                        width: 160px;
                        height: 80px;
                    }
                }
            }
        }
    }

    .catalogue {
        padding-left: 50px;

        .cataItem {
            border-bottom: 1px solid #ccc;
            padding: 5px 0;

            .itemTit {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .iconBox {
                    i {
                        font-size: 16px;
                    }
                }
            }

            .imgBox {
                img {
                    width: 80px;
                    height: 80px;
                    margin-right: 10px;
                }

                video {
                    width: 160px;
                    height: 80px;
                    margin-right: 10px;
                }
            }
        }
    }
</style>